import React, { useState } from 'react';
import axios from 'axios';

const TestAPI = () => {
  const [result, setResult] = useState('');
  const [loading, setLoading] = useState(false);

  const testAPI = async () => {
    setLoading(true);
    setResult('测试中...');
    
    try {
      console.log('开始测试API...');
              // 测试基本连接（不需要code）
        const response = await axios.get('http://localhost:3001/lxt/test-shuidi', {
          timeout: 10000
        });
      
      console.log('API响应:', response.data);
      setResult(JSON.stringify(response.data, null, 2));
    } catch (error) {
      console.error('API测试失败:', error);
      setResult(`错误: ${error.message}\n状态: ${error.response?.status}\n数据: ${JSON.stringify(error.response?.data, null, 2)}`);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>API测试页面</h2>
      <button 
        onClick={testAPI} 
        disabled={loading}
        style={{ padding: '10px 20px', fontSize: '16px' }}
      >
        {loading ? '测试中...' : '测试水滴聚合API'}
      </button>
      
      <div style={{ marginTop: '20px' }}>
        <h3>测试结果:</h3>
        <pre style={{ 
          background: '#f5f5f5', 
          padding: '15px', 
          borderRadius: '5px',
          whiteSpace: 'pre-wrap',
          wordBreak: 'break-word'
        }}>
          {result}
        </pre>
      </div>
    </div>
  );
};

export default TestAPI; 